import { useEffect,useState } from "react";
import { Card,message,Skeleton  } from 'antd';
import HTTP from "../../services/api";
import msgApi from "../../api/msg.api";
import './show.less'

export default function(porps){
    const [msginfo,setMsginfo] = useState([])
    const [isloading,setIsloading] = useState(true)

    const getAllMsg = async()=>{
        let result = await HTTP({method:'get'},msgApi.MsgRestful)
        try {
            if (result.status) {
                setMsginfo(result.info)
                message.success(result.msg)
                setIsloading(false)
            } else {
                message.error(result.msg)
            }
        } catch (error) {
            message.error("服务器异常")
        }
    }

    useEffect(()=>{
        getAllMsg()
    },[])
    return(
        <div>
          <Skeleton loading={isloading} paragraph={{ rows: 20 }} active>
          {
                msginfo.map(item=>
                <Card title={item.title} style={{ width: '100%',padding:'20px 50px' }}>
                    <div dangerouslySetInnerHTML={{__html:item['description']}}>

                    </div>
                </Card>
                )
            }
            </Skeleton>
        </div>
    )
}